<template>
  <div class="common-table-operations-component">
    <!-- 左侧操作区 -->
    <div class="left-actions">
      <!-- 选中项计数显示 -->
      <span v-if="selectedCount > 0 && showSelectedCount" class="selected-count">
        {{ selectedCountText }}
      </span>
      
      <!-- 左侧按钮区域 -->
      <div class="action-buttons">
        <!-- 默认操作按钮 -->
        <template v-for="(button, index) in visibleLeftButtons" :key="index">
          <a-popconfirm
            v-if="button.needConfirm"
            :title="button.confirmText"
            @confirm="handleButtonClick(button.event)"
            :disabled="button.disabled"
          >
            <a-button
              :type="button.type || 'default'"
              :danger="button.danger"
              :disabled="button.disabled"
            >
              <template #icon>
                <component :is="button.icon" v-if="button.icon" />
              </template>
              {{ button.text }}
            </a-button>
          </a-popconfirm>
          
          <a-button
            v-else
            :type="button.type || 'default'"
            :danger="button.danger"
            :disabled="button.disabled"
            @click="handleButtonClick(button.event)"
          >
            <template #icon>
              <component :is="button.icon" v-if="button.icon" />
            </template>
            {{ button.text }}
          </a-button>
        </template>
        
        <!-- 自定义左侧按钮插槽 -->
        <slot name="leftButtons"></slot>
      </div>
    </div>
    
    <!-- 右侧操作区 -->
    <div class="right-actions">
      <!-- 配置的右侧按钮 -->
      <a-space>
        <!-- 配置的右侧按钮 -->
        <template v-for="(button, index) in visibleRightButtons" :key="index">
          <a-popconfirm
            v-if="button.needConfirm"
            :title="button.confirmText"
            @confirm="handleButtonClick(button.event)"
            :disabled="button.disabled"
          >
            <a-button
              :type="button.type || 'default'"
              :danger="button.danger"
              :disabled="button.disabled"
            >
              <template #icon>
                <component :is="button.icon" v-if="button.icon" />
              </template>
              {{ button.text }}
            </a-button>
          </a-popconfirm>
          
          <a-button
            v-else
            :type="button.type || 'default'"
            :danger="button.danger"
            :disabled="button.disabled"
            @click="handleButtonClick(button.event)"
          >
            <template #icon>
              <component :is="button.icon" v-if="button.icon" />
            </template>
            {{ button.text }}
          </a-button>
        </template>
      </a-space>
      
      <!-- 自定义右侧按钮插槽 -->
      <slot name="rightButtons"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

// 按钮配置项接口
export interface ButtonConfig {
  text: string
  event: string
  icon?: any
  type?: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default'
  danger?: boolean
  disabled?: boolean
  needConfirm?: boolean
  confirmText?: string
  show?: boolean | (() => boolean)
}

defineOptions({
  name: 'Operations'
})

// Props 定义
const props = withDefaults(defineProps<{
  // 已选择的项目数量
  selectedCount?: number
  // 是否显示已选项数量
  showSelectedCount?: boolean
  // 已选择项文本（支持 i18n）
  selectedCountText?: string
  // 左侧按钮配置
  leftButtons?: ButtonConfig[]
  // 右侧按钮配置
  rightButtons?: ButtonConfig[]
}>(), {
  selectedCount: 0,
  showSelectedCount: true,
  selectedCountText: '已选择 {count} 项',
  leftButtons: () => [],
  rightButtons: () => []
})

// 计算属性：格式化已选项文本
const selectedCountText = computed(() => {
  return props.selectedCountText.replace('{count}', String(props.selectedCount))
})

// 计算属性：可见的左侧按钮
const visibleLeftButtons = computed(() => {
  return props.leftButtons.filter(button => {
    if (typeof button.show === 'function') {
      return button.show()
    }
    return button.show !== false
  })
})

// 计算属性：可见的右侧按钮
const visibleRightButtons = computed(() => {
  return props.rightButtons.filter(button => {
    if (typeof button.show === 'function') {
      return button.show()
    }
    return button.show !== false
  })
})

// 所有可能的事件
const emit = defineEmits([
  'search',
  'reset',
  'add',
  'batch-delete',
  'delete',
  'export',
  'refresh',
  'upload',
  'batch-read',
  'mark-all-read',
  'clear-read',
  'expand-toggle',
  'button-click' // 通用事件，用于处理自定义按钮事件
])

// 按钮点击处理函数
const handleButtonClick = (event: string) => {
  // 将事件转换为 kebab-case 格式
  const kebabCaseEvent = event
    .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
    .toLowerCase()
  
  // 发射对应事件
  emit(kebabCaseEvent as any)
  // 同时发射通用的按钮点击事件，附带事件名称
  emit('button-click', event)
}
</script>

<style lang="scss" scoped>
// 可以直接使用项目中现有的样式
// 如果需要自定义样式，可以在这里添加
.common-table-operations-component {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  
  .left-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .selected-count {
      color: #1890ff; // 主题色
      font-weight: 500;
    }
    
    .action-buttons {
      display: flex;
      gap: 8px;
      
      :deep(.ant-btn) {
        margin-right: 8px;
        
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  
  .right-actions {
    display: flex;
    align-items: center;
    
    :deep(.ant-btn) {
      margin-left: 8px;
      
      &:first-child {
        margin-left: 0;
      }
    }
  }
}
</style> 